<template>
  <div class="app-container">
    <!-- 添加和修改课时表单 -->
    <el-dialog :visible="dialogVisible" title="添加课时" @close="close()">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" :min="0" />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 上传视频 -->
        <el-form-item label="上传视频">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :limit="1"
            :before-remove="handleBeforeRemove"
            :on-remove="handleOnRemove"
            :action="BASE_API+`/file/video/upload?chapterName=${video.title}`">
            <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
            <el-button
              :disabled="uploadBtnDisabled"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload()">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBaseURL} from "@/utils";
import videoApi from '@/api/vid/video'

export default {
  name: "form",
  data() {
    return {
      BASE_API: getBaseURL(),
      dialogVisible: false,
      video: {
        sort: 0,
        free: false
      },
      fileList: [], // 上传文件列表
      uploadBtnDisabled: false
    }
  },
  created() {

  },
  methods: {
    open(chapterId, videoId) {
      this.dialogVisible = true
      this.video.chapterId = chapterId
      if (videoId) {
        videoApi.getVideoById(videoId).then(res => {
          this.video = res.data
          //回显
          if (this.video.videoOriginalName) {
            this.fileList = [{'name': this.video.videoOriginalName}]
          }
        })
      }
    },
    close() {
      this.dialogVisible = false
      this.video = {
        sort: 0,
        free: false
      }
      this.fileList = []
    },
    saveOrUpdate() {
      if (this.video.id) {
        videoApi.updateVideo(this.video).then(res => {
          this.$message.success('视频更新成功！')
          this.close()
          this.$parent.getNodeList()
        })
      } else {
        this.video.courseId = this.$parent.$parent.courseId
        videoApi.saveVideo(this.video).then(res => {
          this.$message.success('视频添加成功！')
          this.close()
          this.$parent.getNodeList()
        })
      }
    },
    // 上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning('仅能上传一个视频')
    },
    // 上传
    submitUpload() {
      this.uploadBtnDisabled = false
      this.$refs.upload.submit() // 提交上传请求
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) {
      this.uploadBtnDisabled = true
      this.video.videoSourceId = response.data.videoSourceId
      this.video.videoOriginalName = file.name
      this.video.size = response.data.videoSize
    },
    // 失败回调
    handleUploadError() {
      this.uploadBtnDisabled = false
      this.$message.error('上传失败')
    },
    // 删除视频文件确认
    handleBeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 执行视频文件的删除
    handleOnRemove(file, fileList) {
      if (!this.video.videoSourceId) {
        return
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
